<template>
	<div class="updataRecord">
		<el-form :model="upData" style="margin-left:20px;">
	        <el-form-item label="规则名称">
	          <el-input v-model="upData.ruleName"></el-input>
	        </el-form-item>
	        <el-form-item label="规则说明">
	          <el-input v-model="upData.describes"></el-input>
	        </el-form-item>
	        <el-form-item label="适用停车场">
	          <div>
	             <span style="margin-right: 18px;">已选择 {{upData.parkCount}} 家</span><el-button type="info" size="mini" @click="parkVisible=true">请选择</el-button>
	          </div>
	        </el-form-item>
	        <el-form-item label="月付租金">
	          <el-input v-model="upData.monthAmount"></el-input>
	        </el-form-item>
	        <el-form-item label="季付租金">
	          <el-input v-model="upData.quarterAmount"></el-input>
	        </el-form-item>
	        <el-form-item label="年付租金">
	          <el-input v-model="upData.yearAmount"></el-input>
	        </el-form-item>
	        <el-form-item>
	          <p style="color:#aaa;text-align: center;margin: 0;">注：到期自动转临时车收费标准</p>
	        </el-form-item>
	        <el-form-item style="margin-left: -20px;">
	          <p style="text-align: center;margin: 0;"><el-button type="warning" @click="confirmUpdata">确认</el-button></p>
	        </el-form-item>
	    </el-form>

	     <!-- 选择车场弹框 -->
	    <el-dialog title="选择停车场" :visible.sync="parkVisible" width="500px" :before-close="handleClose" :modal="false">
		    <el-form :model="upData" style="margin-left:50px;">
		      <el-form-item label="地区">
		        <v-distpicker @selected="sel"></v-distpicker>
		      </el-form-item>
		      <el-form-item label="停车场名称">
		        <el-select v-model="upData.pId" filterable placeholder="请选择" @change="selectionParkName">
		            <el-option v-for="item in upData.options" :key="item.id" :label="item.parkName" :value="item.parkId">
		            </el-option>
		        </el-select>
		        <span style="margin-left: 10px;">支持多选</span>
		      </el-form-item>
		        <div class="pname" v-for="(name,index) in upData.pName">
		          <span class="colse" @click="cancel(index)">X</span>
		          <span >{{name}}</span>
		        </div>
		      <!-- <el-form-item style="margin-left:70px;">
		        <el-button type="warning" @click="confirmPark" style="margin-top: 20px;">确认</el-button>
		      </el-form-item> -->
		    </el-form>
	    </el-dialog>		


	</div>
</template>
<script>
	import VDistpicker from 'v-distpicker'
	import axios from 'axios'
	import qs from 'qs'

	export default {
		name:'updataRecord',
		components: { VDistpicker },
		props:['row'],
		data() {
			return {
				parkVisible: false,
				upData: {
					ruleType:'0',
			        pId:'',
			        options:[],
			        pName:[],
			        parkIds:[],
			        num:0,
				},
				parkNameSeachData:{},
			}
		},
		mounted(){
			this.upData = this.row;
		},
		methods: {
			handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	        },
	        sel: function(data) {
	            this.parkNameSeachData.province = data.province.value;
	            this.parkNameSeachData.city = data.city.value;
	            this.parkNameSeachData.area = data.area.value;
	            this.getparkData();
    		},
    		// 获取停车场数据在选择停车场中下拉框显示
		    getparkData(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      this.parkNameSeachData.userId = userId;
		      this.parkNameSeachData.token = token;
		      axios({
		        method:'post',
		        url:'/api/bParkManage/getParkByAddress',
		        data:qs.stringify(this.parkNameSeachData)
		      }).then((res) => {
		      	this.upData.options = [];
		        this.upData.options = res.data.data;
		        console.log(this.upData.options)
		      })
		    },
    		selectionParkName(){
		      this.upData.parkIds.push(this.upData.pId)
		      this.getParkNameById();     
		    }, 
		    //根据车场ID查询车场名称
		    getParkNameById(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      axios({
		        method:'post',
		        url:'/api/bParkManage/selectBParkManageById',
		        data:qs.stringify({userId:userId, token:token, parkId:this.addruleData.pId})
		      }).then((res) => {
		        this.upData.pName.push(res.data.data.parkName)
		      })
		    },
		     //确认修改月租卡
		    confirmUpdata(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      axios({
		        method:'post',
		        url:'/api/bElecard/updateByPrimaryKeySelective?token='+token+'&yardManageId='+userId,
		        data:this.upData
		      }).then((res) => {
		      	console.log(res)
		        this.$message('修改成功！');
		        this.$emit('closeDialog', false)
		        this.$emit('refresh');
		      })
		    },


		}
	}
</script>
<style scoped="">
	.el-input{
	  width: 300px;
	}
	.pname{
	  border: 1px solid #ccc;
	  padding: 6px 10px;
	  padding-right: 14px;
	  border-radius: 5px;
	  margin:4px;
	  display: inline-block;
	  position: relative;
	}
	.colse{
	  position: absolute;
	  top: 1px;
	  right: 2px;
	  font-size: 12px;
	}
	.colse:hover{
	  cursor: pointer;
	}



</style>